<template>
  <div class="trafficMasterMgt">
    <div class="content-table">
      <div class="form-content flexrowbetween">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
        >
          <el-form-item label="用户名" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入用户名"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="会员ID" prop="id">
            <el-input
              v-model="queryParams.id"
              placeholder="请输入会员ID"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="结单审核状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="请选择资结单核状态"
              clearable
              @change="handleQuery"
              style="width: 200px"
            >
              <el-option
                v-for="dict in checkStatusList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="结算时间" prop="timeRange">
            <el-date-picker
              v-model="timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="table-content">
        <div class="table-group">
          <div class="group-right">
            <el-button size="mini" type="primary" @click="handleExport()" v-hasPermi="['historyList:export']">导出</el-button>
          </div>
        </div>
        <div class="table-big">
          <el-table
            :data="tableDataList"
            ref="historicalSettlementList"
            :max-height="tableHeight"
            class="tableHightClass"
          >
            <el-table-column
              :label="item.label"
              align="center"
              v-for="(item, index) in tableColumns"
              :key="index"
              :prop="item.key"
              :min-width="item.minWidth ? item.minWidth : ``"
              :fixed="item.fixed ? item.fixed : false"
              :show-overflow-tooltip="true"
            >
              <!--用于表格自定义-->
              <template slot-scope="scope">
                <!--状态-->
                <div v-if="item.key == 'status_name'" class="status">
                  <span :class="scope.row.status == 1 ? `color-green` : `color-red`">{{ scope.row[item.key] }}</span>
                </div>
                <div v-else>{{ scope.row[item.key] }}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="created_at"
              label="操作"
              width="180"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                <div class="flexcenter btnflex">
                  <div class="commhover mr_10 c_primary" @click="downFile(scope.row)" v-hasPermi="['historyList:downAccount']">下载</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.num"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reqPayCheckIndexExport, reqPayCheckIndex, reqTrafficPayStatus } from '@/api/trafficMasterMgt'
export default {
  name: "historicalSettlementList",
  data() {
    return {
      // 查询参数
      total: 8, // 表格的总条数
      tableHeight: null,
      id: null, //id
      queryParams: {
        page: 1,
        num: 10,
        name: "", //名字
        id: null,
        status: null, //状态
        start: null, //开始时间
        end: null //结束时间
      },
      statusList: [
        { value: 0, label: "禁用" },
        { value: 1, label: "启用" },
      ], //状态集合
      timeRange:[],
      tableDataList: [], //表格数据
      checkStatusList: [], //
      tableColumns: [
        { key: "custom_id", label: `ID`, visible: true, fixed: true },
        { key: "user_login", label: `会员名`, visible: true, fixed: false, },
        { key: "create_time", label: `结算时间`, visible: true, minWidth: 150, fixed: false, },
        { key: "type_name", label: `结算类型`, visible: true, minWidth: 150, fixed: false, },
        { key: "status_name", label: `结算进度`, visible: true, minWidth: 150 },
        { key: "score", label: `原始收入（广告币）`, visible: true, minWidth: 150, },
        { key: "use_coin", label: `原始收入（元）`, visible: true, minWidth: 150, },
        { key: "old_coin", label: `结算收入（元）`, visible: true, minWidth: 150, },

      ],
      //
      exportColumns: [
        { key: "custom_id", label: `ID`, visible: true, fixed: true },
        { key: "custom.user_login", label: `会员名`, visible: true, fixed: false, },
        { key: "create_time", label: `结算时间`, visible: true, minWidth: 150, fixed: false, },
        { key: "type_name", label: `结算类型`, visible: true, minWidth: 150, fixed: false, },
        { key: "status_name", label: `结算进度`, visible: true, minWidth: 150 },
        { key: "score", label: `原始收入（广告币）`, visible: true, minWidth: 150, },
        { key: "use_coin", label: `原始收入（元）`, visible: true, minWidth: 150, },
        { key: "old_coin", label: `结算收入（元）`, visible: true, minWidth: 150, },
      ],
    };
  },
  components:{
  },
  created() {
    this.getList();
    this.getCustomCheckStatus(); //资质审核

  },
  watch: {
    tableDataList: {
      handler(val) {
        if (val.length > 0) {
          this.getTabelHeight(); //获取表格的最大高度
          this.getTableContentHeight(); //获取整体的高度
          this.$refs.historicalSettlementList.doLayout();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getTabelHeight(); //获取表格的最大高度
    this.getTableContentHeight(); //获取整体的高度
    window.onresize = () => {
      return (() => {
        this.getTabelHeight(); //获取表格的最大高度
        this.getTableContentHeight(); //获取整体的高度
        this.$refs.historicalSettlementList.doLayout();
      })();
    };
  },

  methods: {
    getTableContentHeight() {
      let topHeight = document.querySelector(".table-content").offsetTop;
      let windowsHeight = document.body.clientHeight;
      document.querySelector(".table-content").style.height =
        windowsHeight - topHeight - 80 + "px";
    },
    getTabelHeight() {
      //获取表格的高度
      let topHeight = document.querySelector(".tableHightClass").offsetTop;
      let windowsHeight = document.body.clientHeight;
      if (this.total > 10) {
        let paginationContainerHeight = document.querySelector(
          ".pagination-container"
        ).clientHeight;
        this.tableHeight =
          windowsHeight - topHeight - 20 - paginationContainerHeight - 80;
      } else {
        this.tableHeight = windowsHeight - topHeight - 20;
      }
    },
    getCustomCheckStatus() {
      this.checkStatusList = []
      reqTrafficPayStatus().then((res) => {
        for (let key in res.data) {
          let obj = {
            value: key,
            label: res.data[key]
          }
          this.checkStatusList.push(obj)
        }
      })
    },
    getList() {
      this.tableDataList = [];
      this.loading = true;
      if (this.timeRange && this.timeRange.length > 0) {
        this.queryParams.start = this.timeRange[0]
        this.queryParams.end = this.timeRange[1]
      } else {
        this.queryParams.start = null
        this.queryParams.end = null
      }
      for (let key in this.queryParams) {
        if (!this.queryParams[key]) {
          delete this.queryParams[key]
        }
      }
      reqPayCheckIndex(this.queryParams).then((res) => {
        this.tableDataList = res.data.list;
        this.tableDataList.forEach(item=>{
          item.user_login=item.custom.user_login
        })
        this.total = res.data.count;
        this.loading = false;
      });
    },
    downFile(row){
      let url = row.check_url
      const a = document.createElement('a')
      a.href = url;
      a.download = '历史结算单.xls' // 下载后文件名
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click() // 点击下载
      document.body.removeChild(a) // 下载完成移除元素
    },
    //搜索
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    //重置表单
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      let form = JSON.parse(JSON.stringify(this.queryParams))
      let head = []
      let keys = []
      for (let key in form) {
        if (!form[key]) {
          delete form[key]
        }
      }
      this.exportColumns.forEach(item => {
        head.push(item.label)
        keys.push(item.key)
      })
      form.head = head
      form.keys = keys
      delete form.page
      delete form.num
      reqPayCheckIndexExport(form).then((res) => {
        if (res.code == 1) {
          const a = document.createElement('a')
          document.body.appendChild(a)
          a.download = '流量主管理导出表.xls'
          a.href = res.data
          a.click()
          document.body.removeChild(a)
        }

      })

    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .big-title {
    height: 40px;
    border-bottom: 1px solid #d5d5d5;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0px 24px;
  }

  .form-content {
    padding: 12px;
    background: #fff;
    margin-bottom: 10px;
  }

  /*表格通用代码编写，可用于全局*/
  .table-content {
    background: #fff;
    padding: 0px 15px;

    .table-group {
      display: flex;
      padding: 12px 0px;
      flex-wrap: wrap;

      .group-left {
        width: 200px;
        display: flex;
        flex-wrap: wrap;

        ::v-deep.el-button--primary {
          border: 1px solid #1670f1;
          background: none !important;
          color: #1670f1;
        }
      }

      .group-right {
        flex: 1;
        align-items: center;
        justify-content: flex-end;
        display: flex;

        .suspendBtn {
          background: #fb311e !important;
          border-color: #fb311e;
        }

        .exportBtn,
        .customStyle {
          border: 1px solid #1670f1;
          background: none !important;
          color: #1670f1;
        }
      }
    }

    /*表格样式*/
    .table-big {
      ::v-deep .el-table {
        .links {
          color: #1670f1;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }
}

.tableList {
  display: flex;
  border-bottom: 1px solid #eee;
  background: #fff;
  padding: 0px 20px;
  margin: 0;
  height: 54px;
  border-bottom: 10px solid #f8f9fd;
  margin: 16px 0px 0 0px;

  li {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0px 10px;
    position: relative;
    cursor: pointer;
    height: 44px;
    color: #8e8e8e;
    margin-right: 30px;

    &.active {
      font-weight: bold;
      color: #000;

      &:after {
        height: 2px;
        background: #1670f1;
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
      }
    }
  }
}

.status {
  span {
    position: relative;
    padding-left: 15px;

    &:after {
      position: absolute;
      left: 0px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      content: "";
      top: 50%;
      margin-top: -4.5px;
    }

    &.color-green:after {
      background: #00dd33;
    }

    &.color-red:after {
      background: #d10807;
    }
  }
}

.columnsFields {
  overflow-y: auto;
  padding: 10px 10px;

  .el-checkbox-group {
    display: flex;
    flex-direction: column;

    .el-checkbox {
      width: 200px;
      margin-bottom: 5px;
    }
  }
}

.el-dropdown {
  margin-left: 10px;
}
.el-form-item {
  margin-bottom: 10px;
}
</style>
